<template>



  <div class="db">
    <div class="today">
      <div class="todo">
        <el-icon style="padding-right: 5px"><Sunny /></el-icon>
        今日待办
      </div>
      <div class="add">
<!--        <el-button type="primary" @click="dialogFormVisible1 = true"  > <el-icon><Plus /></el-icon>添加</el-button>-->
        <button class="custom-btn btn" @click="dialogFormVisible1 = true"><span><el-icon><Plus /></el-icon>添加</span></button>
      </div>

    </div>
    <el-divider />
    <div>
      <el-table :data="todotable" class="tab" style="width: 100%">
        <el-table-column prop="todo" label="事项" width="" ></el-table-column>
        <el-table-column prop="begin" label="开始时间" width="170" ></el-table-column>
        <el-table-column prop="end" label="结束时间" width="170" ></el-table-column>
        <el-table-column label="操作" width="200" align="center">
          <template #default="row">
            <el-button type="warning" @click="updatesub(row);dialogFormVisible2 = true"><el-icon><Edit /></el-icon>编辑</el-button>
            <el-popconfirm
                width="220"
                confirm-button-text="确定"
                cancel-button-text="再想想"
                title="确定要删除吗"
                @confirm="confirmEvent(row)"
                @cancel="cancelEvent"
            >
              <template #reference>
                <el-button type="danger"><el-icon><Delete /></el-icon>删除</el-button>
              </template>
            </el-popconfirm>
<!--            <el-button type="danger">删除</el-button>-->
          </template>
        </el-table-column>

      </el-table>
    </div>
  </div>

  <!--添加-->
  <el-dialog v-model="dialogFormVisible1" title="添加事项">
    <el-form  :model="form1"  label-width="120px">
      <el-form-item label="事项名称">
        <el-input v-model="form1.todo"  />
      </el-form-item>
      <el-form-item label="开始时间">
        <div class="block">
          <el-date-picker
              v-model="form1.begin"
              type="datetime"
                placeholder="请选择开始时间"
          />
        </div>
      </el-form-item>
      <el-form-item label="结束时间">
        <el-date-picker
            v-model="form1.end"
            type="datetime"
            placeholder="请选择结束时间"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible1 = false">取消</el-button>
<!--        <el-button type="primary" @click="dialogFormVisible = false"> -->
        <el-button type="primary" @click="addsub();dialogFormVisible1 = false">
          提交
        </el-button>
      </span>
    </template>
  </el-dialog>

  <!--编辑-->
  <el-dialog v-model="dialogFormVisible2" title="编辑事项">
    <el-form  :model="form2"  label-width="120px">
      <el-form-item label="事项名称">
        <el-input v-model="form2.todo"  />
      </el-form-item>
      <el-form-item label="开始时间">
        <div class="block">
          <el-date-picker
              v-model="form2.begin"
              type="datetime"
              placeholder="请选择开始时间"
          />
        </div>
      </el-form-item>
      <el-form-item label="结束时间">
        <el-date-picker
            v-model="form2.end"
            type="datetime"
            placeholder="请选择结束时间"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible2 = false">取消</el-button>
        <!--        <el-button type="primary" @click="dialogFormVisible = false"> -->
        <el-button type="primary" @click="upsub(form2);dialogFormVisible2 = false">
          提交
        </el-button>
      </span>
    </template>
  </el-dialog>

</template>

<script lang="ts" setup>
// export default {
//   name: "Home"
// }
import axios from "@/utils/axios";
import { ElMessage } from 'element-plus'
import { reactive,ref,onMounted} from "vue";
import qs from "qs"
import dayjs from "dayjs"

const dialogFormVisible1 = ref(false)
const dialogFormVisible2 = ref(false)
const signin = ref(false)

const form1 = ref({
  todo: "",
  begin: "",
  end: "",
    }
)
const form2 = ref()
const todotable = ref([]);

// time = this.dayjs(time).format("YYYY-MM-DD HH:mm:ss");

const data = form1.value;

function addsub(){
  data.begin = dayjs(data.begin).format("YYYY-MM-DD HH:mm:ss");
  data.end = dayjs(data.end).format("YYYY-MM-DD HH:mm:ss");
  axios.post(
    "/add",
    qs.stringify(data)
  )
      .then(res => {
        console.log(res);
        location.reload()
        ElMessage({
          message: '添加成功',
          type: 'success',
        })
      })
      .catch(err => {
        console.log(err);
        ElMessage.error('添加失败')
      })
}
function updatesub(row){
  console.log(row.row);
  form2.value = row.row;
}
function upsub(form2){
  form2.begin = dayjs(form2.begin).format("YYYY-MM-DD HH:mm:ss");
  form2.end = dayjs(form2.end).format("YYYY-MM-DD HH:mm:ss");
  axios.post(
      "/update",
      qs.stringify(form2)
  )
      .then(res => {
        location.reload()
        ElMessage({
          message: '修改成功',
          type: 'success',
        })
      })
      .catch(err => {
        console.log(err);
        ElMessage.error('修改失败')
      })
}



onMounted(() => {


  axios
      .get("/query")
      .then((res: any) => {
        todotable.value = res;
      })
      .catch((err: any) => {});
});


const confirmEvent = (row) => {
  console.log('确认!')
  console.log(row.row)
  axios.post(
      "/delete",
      qs.stringify(row.row)
  )
      .then(res => {
        location.reload()
        ElMessage({
          message: '删除成功',
          type: 'success',
        })
      })
      .catch(err => {
        console.log(err);
        ElMessage.error('删除失败')
      })
}
const cancelEvent = () => {
  console.log('取消!')
}


</script>

<style scoped>
.text {
  font-size: 14px;
}


.box-card {
  width: 95%;
  margin:-5px 0 0 30px;
  height: 70px;
}
.sy {
  float: left;
  width: 6%;
  font-size: 20px;
  font-weight:bold;
  display: inline-block
}
.sign{
  display: inline-block;
  float: right;
}
.db{
  width: 95%;
  margin: 40px 0 0 30px;
  background: rgba( 247, 255, 247, 0.35 );
  box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
  backdrop-filter: blur( 16px );
  -webkit-backdrop-filter: blur( 16px );
  border-radius: 10px;
}

.tab{
  width: 100%;
  background-color: transparent !important;
}
.todo{
  /*display: inline-block;*/
  /*float: left;*/
  text-align: left;
  font-size: 30px;
  margin-left: 36px;
  margin-top: 20px;
}
.add{
  /*display: inline-block;*/
  /*float: right;*/
  text-align: right;
  margin-right: 30px;
}
.custom-btn {
  width: 130px;
  height: 40px;
  color: #fff;
  border-radius: 5px;
  padding: 10px 25px;
  font-family: 'Lato', sans-serif;
  font-weight: 500;
  background: transparent;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  display: inline-block;
  box-shadow: inset 2px 2px 2px 0px rgba(255, 255, 255, .5),
  7px 7px 20px 0px rgba(0, 0, 0, .1),
  4px 4px 5px 0px rgba(0, 0, 0, .1);
  outline: none;
}

.btn {
  background: linear-gradient(0deg, rgba(255, 151, 0, 1) 0%, rgba(251, 75, 2, 1) 100%);
  line-height: 42px;
  padding: 0;
  border: none;
}

.btn span {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}

.btn:before,
.btn:after {
  position: absolute;
  content: "";
  right: 0;
  bottom: 0;
  background: rgba(251, 75, 2, 1);
  box-shadow: -7px -7px 20px 0px rgba(255, 255, 255, .9),
  -4px -4px 5px 0px rgba(255, 255, 255, .9),
  7px 7px 20px 0px rgba(0, 0, 0, .2),
  4px 4px 5px 0px rgba(0, 0, 0, .3);
  transition: all 0.3s ease;
}

.btn:before {
  height: 0%;
  width: 2px;
}

.btn:after {
  width: 0%;
  height: 2px;
}

.btn:hover {
  color: rgba(251, 75, 2, 1);
  background: transparent;
}

.btn:hover:before {
  height: 100%;
}

.btn:hover:after {
  width: 100%;
}

.btn span:before,
.btn span:after {
  position: absolute;
  content: "";
  left: 0;
  top: 0;
  background: rgba(251, 75, 2, 1);
  box-shadow: -7px -7px 20px 0px rgba(255, 255, 255, .9),
  -4px -4px 5px 0px rgba(255, 255, 255, .9),
  7px 7px 20px 0px rgba(0, 0, 0, .2),
  4px 4px 5px 0px rgba(0, 0, 0, .3);
  transition: all 0.3s ease;
}

.btn span:before {
  width: 2px;
  height: 0%;
}

.btn span:after {
  height: 2px;
  width: 0%;
}

.btn span:hover:before {
  height: 100%;
}

.btn span:hover:after {
  width: 100%;
}
</style>

